<template>
  <div>
    <headtop></headtop>
    <div class="title">
      <img src="../assets/manage/pic_step.png">
    </div>
    <div  class="content">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6"><img src="../assets/manage/pic_task.png" @click="allotTask()" style="cursor: pointer"></el-col>
        <el-col :span="6"><img src="../assets/manage/pic_set.png" @click="allotDevice()" style="cursor: pointer"></el-col>  <!--暂未实现-->
        <el-col :span="6"><img src="../assets/manage/pic_work.png" style="cursor: pointer"></el-col>
      </el-row>
    </div>
    <div class="title2">
      <img src="../assets/manage/pic_other.png">
    </div>
    <div  class="content">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6"><img src="../assets/manage/rec_1.png" @click="reportList()" style="cursor: pointer"></el-col>
        <el-col :span="6"><img src="../assets/manage/rec_2.png"  @click="examList()" style="cursor: pointer"></el-col>
        <el-col :span="6"><img src="../assets/manage/rec_3.png"  @click="taskList()" style="cursor: pointer"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import headtop from './head.vue'
  export default {
    components: {
      headtop
    },
    methods: {
      allotTask () {
        this.$router.push({path: '/manage/taskAllotList'})  // FIXME: 不会刷新
      },
      allotDevice () {
        this.$message({
          type: 'warning',
          message: '该功能开发中'
        })
      },
      reportList () {
        this.$router.push({path: '/manage/reportList'})  // FIXME: 不会刷新
      },
      examList () {
        this.$router.push({path: '/manage/examList'})  // FIXME: 不会刷新
      },
      taskList () {
        this.$router.push({path: '/manage/taskList'})  // FIXME: 不会刷新
      }
    }
  }
</script>

<style scoped lang="less">
  .title {
    text-align: center;
    img {
      margin-top: 20px;
    }
  }
  .content {
    margin-top: 30px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title2 {
    text-align: center;
    margin-top: 30px;
    img {
      margin-top: 20px;
    }
  }
</style>
